<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flux</title>
    <style>
        /*主体*/
        .flux-body {
            margin: 0 auto;
            width: 50%;
            word-wrap: break-word
        }

        /*标题*/
        .flux-title {
            text-align: center;
        }
    </style>
</head>

<body>
<!--demo1-->
<div class="flux-body">
    <h4 class="flux-title">demo1</h4>
    <span id="textSpan1"></span>
</div>
<!--demo2-->
<div class="flux-body">
    <h4 class="flux-title">demo2</h4>
    <span id="textSpan2"></span>
</div>
</body>

<script type="text/javascript">
    //获取sse,此处填写接口地址
    new EventSource("/getFlux1").onmessage = (e) => {
        document.getElementById("textSpan1").innerText += e.data
    }
    //获取sse,此处填写接口地址
    new EventSource("/getFlux2").onmessage = (e) => {
        document.getElementById("textSpan2").innerText += e.data
    }
</script>
</html>